<template>
  <h1>computed：计算属性</h1>
  <h2>{{ arr }}</h2>
  <button @click="arr[1] = 10">修改数组</button>
  <h3>数据累计求和：{{ allSum }}</h3>
  <h3>数据累计乘积：{{ allSum2 }}</h3>
  <h3>数据累计减：{{ changeSum }}</h3>
  <button @click="changeSum = 6666">修改值</button>
</template>

<script setup lang="ts">
import { computed, reactive } from "vue";

// 计算属性：
// 1.主要用于处理数据，返回数据结果；
// 2.一般计算属性的值是不能修改,因为默认使用的是getter
// 3.只能使用setter才能修改数据

let arr = reactive([2, 4, 6, 8]);
let allSum = computed(() => {
  return arr.reduce((pre: number, next: number): number => {
    return pre + next;
  });
});

let allSum2 = computed(() => {
  return arr.reduce((pre: number, next: number): number => {
    return pre * next;
  });

});

let changeSum = computed({
  get() {
    return arr.reduce((pre: number, next: number): number => {
      return pre - next;
    });
  },
  set(val) {
    arr[2]=val;
  },
});
</script>

<style scoped></style>
